#include('../../header.html', {title: '批改试卷'})
<div class="es-wrap">
  <div id="content-container" class="container">
    <div class="row row-3-9 my-layout">
      <div class="col-md-3">
        #include('../sideMenu.html', {user: 'tea', name: '试卷批阅'})
      </div>
      <div class="col-md-9" id="t-exam">
        <div class="panel panel-default panel-col">
          <div class="panel-heading">
            试卷批阅
            <div class="pull-right">
              <select class="form-control width-150">
                <template v-for="course in courses">
                  <option value="course.id">{{course.name}}</option>
                </template>
              </select>
            </div>
          </div>
          <div class="panel-body">
            <ul class="nav nav-pills">
              <li class="active" @click="tab_(0)"><a href="javascript:">未批阅</a></li>
              <li @click="tab_(1)"><a href="javascript:">已批阅</a></li>
            </ul>
            <br>
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>试卷</th>
                  <th>提交者</th>
                  <th>时间</th>
                  <th>文件</th>
                  <th>评分</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
              <tr v-if="joinPapers.length<=0">
                <td colspan="7"><div class="cd-empty">暂无批阅试卷</div></td>
              </tr>
              <tr is="jp-tr" v-for="(jp, index) in joinPapers"
                  :jp="jp" :index="index" :key="jp.id"></tr>
              </tbody>
            </table>
            <div v-if="page.totalPages<=0" class="text-center">
              <navigation :pages="page.totalPages" :current.sync="page.pageNum" @navpage="gotoPage"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<template id="jp-tr">
  <tr>
    <td>
      <a :href="'/course/'+jp.courseId+'/join/info'" target="_blank">{{jp.testpaper.name}}</a>
    </td>
    <td>
      <a :href="'/user/'+jp.user.id+'/home'">{{jp.user.username}}</a>
    </td>
    <td>{{jp.time.substr(0, 16)}}</td>
    <td>
      <a :href="jp.result+'&name='+paperName()" target="_top" class="btn btn-success btn-xs" title="下载学生答卷">下载</a>
    </td>
    <td>{{jp.score==0?'未评分':jp.score}}</td>
    <td>
      <button @click="mark_" class="btn btn-info btn-xs">{{jp.score<=0?'评分':'修改'}}</button>
    </td>
  </tr>
</template>
<script>
  var teVm = new Vue({
    el: '#t-exam',
    data: {
      courses: [],
      joinPapers: [],
      page: {
        pageNum: 1,
        totalPages: 1
      },
      kid: null,
      status: 2
    },
    watch: {
      kid: function (nv) {
        this.page.pageNum = 1;
        this.getJoinPapers();
      },
      status: function (nv) {
        this.page.pageNum = 1;
        this.getJoinPapers();
      },
      pageNum: function (nv) {
        this.getJoinPapers();
      }
    },
    methods: {
      gotoPage: function(page) {
        this.page.pageNum = page;
      },
      tab_: function(index) {
        switchTab(index);
        if (this.status !== index + 2) {
          if (index === 0) this.status = 2;
          else this.status = 3;
        }
      },
      getJoinPapers: function () {
        var self = this;
        self.joinPapers = [];
        $.post('/course/join_paper/t/page', {kid: self.kid, page: self.page.pageNum, status: self.status}, function (data) {
          if (data.success) {
            self.joinPapers = data.payload.rows;
            self.page.pageNum = data.payload.pageNum;
            self.page.totalPages = data.payload.totalPages;
          }
        })
      }
    },
    components: {
      'jp-tr': {
        props: ['jp', 'index'],
        template: '#jp-tr',
        methods: {
          paperName: function() {
            return this.jp.testpaper.name+"-学生答卷("+this.jp.user.username+")";
          },
          mark_: function () {
            var self = this;
            var u = this.jp.user.username;
            layer.prompt({title: '请输入分数('+u+')：', maxlength: 4, value: this.jp.score}, function(text, index) {
              if (!/^([0-9]|\.)*$/.test(text) || parseFloat(text) > 100) {
                layer.msg('分数格式不对！', {offset: 't', icon: 5, time: 1200});
              } else {
                $.post('/course/join_paper/'+self.jp.id+'/mark', {score: text}, function (data) {
                  if (data.success) {
                    if (self.jp.score <= 0) self.$root.joinPapers.splice(self.index, 1);
                    self.jp.score=text;
                    layer.close(index);
                  }
                });
              }
            });
          }
        }
      }
    },
    created: function () {
      var self = this;
      $.post('/course/api/protect/page', {size: 100000, status: 1}, function (data) {
        if (data.success) {
          self.courses = data.payload.rows;
          self.kid = self.courses[0].id;
          self.getJoinPapers();
        }
      });
    }
  });

  function switchTab(index) {
    $('.nav-pills > li').removeClass('active').eq(index).addClass('active');
  }
</script>
#include('../../footer.html')